<template>
  <div class="container">
    <Breadcrumb :items="['menu.flow', '流程实列']" />
    <header-query
      :config="queryConfig"
      @search="search"
      @reset="reset"
    />
    <a-card class="general-card">
      <!--列表-->
      <a-table
        row-key="instanceId"
        :size="size"
        :bordered="{cell:true}"
        :loading="loading"
        :columns="cloneColumns"
        :data="tableData"
        :pagination="pagination"
        :expandable="expandable"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <template #expand-row="{ record }">
          <a-row :gutter="12">
            <template v-for="item in record.flowTaskList" :key="item.taskId">
              <a-col :span="8">
                <a-descriptions bordered column="2" @click="complete(item)">
                  <a-descriptions-item label="审批节点">
                    {{ item.taskName }}
                  </a-descriptions-item>
                  <a-descriptions-item label="审批人">
                    {{ item.assigneeName }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-col>
            </template>
          </a-row>
        </template>
        <template #status="{ record }">
          <table-column-process-status :status="record.status" />
        </template>
        <template #operations="{ record }">
          <column-operator
            :btn-size="size"
            :config="columnOperators"
            :record="record"
            @record-operator="recordOperator"
          />
        </template>
      </a-table>
    </a-card>

    <!-- 任务详情对话框 -->
    <drawer-task ref="drawerTaskRef" :mode="true" @submit="fetchData" />

    <!-- 流程详情对话框 -->
    <drawer-instance ref="drawerInstanceRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { list, revocationInstance, FlowInstance } from '@/api/flow/instance';
import cloneDeep from 'lodash/cloneDeep';
import useLoading from '@/hooks/loading';
import { Message, Modal, PaginationProps } from '@arco-design/web-vue';
import { queryConfig, tableColumns, columnOperators } from '@/views/flow/instance/config';
import TableColumnProcessStatus from '@/views/flow/common/components/table-column-process-status.vue';
import DrawerTask from '@/views/flow/common/drawer-task.vue';
import DrawerInstance from '@/views/flow/common/drawer-instance.vue';

const { loading, setLoading } = useLoading(true);

const queryParams = ref();
const size = ref('medium');
const tableData = ref<FlowInstance[]>([]);
const cloneColumns = ref<any>([]);

const basePagination: PaginationProps = {
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true
};

const pagination = reactive({
  ...basePagination
});

const expandable = reactive({
  title: '',
  width: 80
});

const pageChange = (page: number | undefined) => {
  pagination.current = page;
  fetchData();
};

const pageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize;
  fetchData();
};

const fetchData = async () => {
  setLoading(true);
  try {
    const params = {
      page: {
        current: pagination.current,
        size: pagination.pageSize
      },
      query: queryParams.value
    };
    const { data } = await list(params);
    tableData.value = data.records;
    pagination.current = Number(data.current);
    pagination.total = Number(data.total);
  } finally {
    setLoading(false);
  }
};

const search = (value: FlowInstance) => {
  queryParams.value = value;
  fetchData();
};

const reset = () => {
  queryParams.value = {};
  fetchData();
};

const drawerInstanceRef = ref();

const recordOperator = (value: string, record: FlowInstance, setLoading: any) => {
  if (value === 'detail') {
    drawerInstanceRef.value.open(record);
    return;
  }
  if (value === 'delete') {
    const processInstanceId = record.processInstanceId || '';
    Modal.warning({
      content: '确定销毁流程',
      simple: true,
      hideCancel: false,
      cancelText: '取消',
      onOk: () => {
        revocationInstance(processInstanceId).then((res) => {
          Message.info('操作成功');
          fetchData();
        });
      }
    });
  }
};

const drawerTaskRef = ref();

const complete = (task: any) => {
  drawerTaskRef.value.open(task);
};

onMounted(() => {
  fetchData();
});

watch(
  () => tableColumns.value,
  (val) => {
    cloneColumns.value = cloneDeep(val);
    cloneColumns.value.forEach((item: { checked: boolean; }, index: any) => {
      item.checked = true;
    });
  },
  { deep: true, immediate: true }
);
</script>

<script lang="ts">
export default {
  name: 'FlowInstance'
};
</script>

<style scoped lang="less">
@import "/src/components/table/common";
</style>